<script src="../../lib/jquery-1.7.1.js"></script>
<script src="../../src/tabs/tabs.js"></script>
<script src="../../src/dateinput/dateinput.js"></script>

<link rel="stylesheet" type="text/css" href="skin1.css"/>
<link rel="stylesheet" type="text/css" href="../tabs/tabs.css"/>
 

<style>
body {
	margin:100px;
	font-family:sans-serif;
	width:800px;
	font-size:12px;
}
</style>

<!-- tabs -->
<ul class="css-tabs">
	<li><a href="#1">Tab 1</a></li>
	<li><a href="#2">Second tab</a></li>
	<li><a href="#3">A ultra long third tab</a></li>
</ul>

<!-- panes -->
<div class="css-panes">

	<div class="pane">
		<h3>Tab 1</h3>
		<input type="date" name="mydate" />
		<input type="text" name="foo" />		
		<input type="date" name="mydate" />				
	</div>
	
	<div class="pane">
		<h3>Tab 2</h3>
		<input type="date" name="mydate" />
	</div>
	
	<div class="pane">
		<h3>Tab 3</h3>
		<input type="date" name="mydate" />
	</div>
</div>


<script>
$(".css-tabs").tabs(".css-panes > div");
$(":date").dateinput();
</script>


